@mixin center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
$seashell: #f1c40f;

html {
  font-size: 15px;
}
body {
  width: 100vw;
  height: 100vh;
  background-color: #2c3e50;
}

main {
  width: 400px;
  height: 400px;
  border: solid 1px $seashell;
  border-radius: 50%;
  @include center();
  &::after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: $seashell;
    border-radius: 50%;
    @include center();
  }
  section:nth-child(1) {
    @include center();
    width: 100%;
    height: 100%;
    transform-origin: center;
    // transform: translate(-50%, -50%) rotate(-180deg);
    div {
      @include center;
      width: 5px;
      height: 30px;
      background-color: $seashell;
      transition-duration: 2s;
      transform-origin: left top;
      transform: translate(0, 0);
      @for $i from 1 to 13 {
        &:nth-child(#{$i}) {
          transform: rotate(#{$i * 30+180}deg) translateY(150px);
          &::after {
            content: '#{$i}';
            color: $seashell;
            position: absolute;
            bottom: 30px;
            transform: rotate(#{360 - ($i * 30+180)}deg);
          }
        }
      }
    }
    &:hover {
      div {
        // transform: rotate(160deg);
      }
    }
  }
}
